<template>
	<div class="upload_box" @click.stop="handleClick">
		<slot v-if="customsrc && !img" />
		<video v-if="img" :src="img" id="file" width="100%" height="100%" controls muted></video>
		<input ref="uploadImg" type="file" :accept="accept" @change="handleChange">
	</div>
</template>
<script>
import { UploadGetToken } from '@/api/upload'
import defaultSettings from '@/settings'
import * as qiniu from 'qiniu-js'
export default {
	props: {
		preview: {
			type: Boolean,
			default: false
		},
		accept: {
			type: String,
			default: '.mp3, .mp4, .video, .audio'
		},
		disabled: {
			type: Boolean,
			default: false
		},

		limit: {
			type: Number,
			default: 100
		},
		defsrc: {
			type: String,
			default: '',
			require: true
		},
		customsrc: {
			type: String,
			default: ''
		},
		// eslint-disable-next-line vue/require-default-prop
		// beforeUpload: Function,
		// eslint-disable-next-line vue/require-default-prop
		onSuccess: Function
	},
	data() {
		return {
			img: '',
			valueAll: [], // 累计上传的图片
			token: ''
		}
	},
	watch: {
		defsrc: {
			handler: function (val) {
				// console.log(val)
				if (val) {
					this.img = defaultSettings.BASE_IMG + val
				} else {
					this.img = ''
				}
			},
			immediate: true
		}
	},
	methods: {
		handleClick() {
			if (!this.preview) {
				if (!this.disabled) {
					this.$refs.uploadImg.click()
				}
			}
		},
		beforeUpload(file) {
			const _this = this
			_this.$refs.uploadImg.value = '' // 处理重复图片上传  组件反应无状态
			// 进行图片类型和大小的限制
			var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
			const extension = testmsg === 'mp3'
			const extension2 = testmsg === 'mp4'
			const extension3 = testmsg === 'video'
			const extension4 = testmsg === 'audio'
			if (!extension && !extension2 && !extension3 && !extension4) {
				_this.$message({
					message: this.$t('text.isFormat'),
					type: 'warning'
				})
				return false //必须加上return false; 才能阻止
			}
			const isLimit = file.size / 1024 / 1024 <= this.limit
			if (!isLimit) {
				_this.$message({
					message: this.$t('text.isFileSize') + `${this.limit}` + ',' + this.$t('placeholderTip.reSelect'),
					type: 'warning'
				})
				return false // 必须加上return false; 才能阻止
			}

			return (extension || extension2 || extension3 || extension4) && isLimit
		},
		handleChange(e) {
			var _this = this
			var file = e.target.files[0],
				flag = true
			// _this.img = URL.createObjectURL(file)
			if (
				Object.prototype.toString.call(_this.beforeUpload) ===
				'[object Function]'
			) {
				flag = _this.beforeUpload(file)
			}
			if (flag) {
				UploadGetToken().then(res => {
					if (res.code === 200) {
						var token = res.data.token
						const loading = _this.$loading({
							lock: true,
							text: this.$t('text.loading'),
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.5)'
						})
						// 上传时的配置
						var config = {
							useCdnDomain: true
						}
						//  设置文件的配置
						var putExtra = {
							fname: '',
							params: {},
							mimeType: null
						}
						var key = new Date().getTime()
						//   实例化七牛云的上传实例
						var observable = qiniu.upload(file, key, token, putExtra, config)
						//   设置实例的监听对象
						var observer = {
							next(res) {
								// console.log(res)
							},
							// 接收上传错误信息
							error(err) {
								console.log(err, 'err')
								_this.$message({
									message: this.$t('text.isFileFail'),
									type: 'error'
								})
								this.img = ''
								loading.close()
							},
							// 接收上传完成后的信息
							complete(res) {
								if (res.key) {
									_this.onSuccess(res, file)
									loading.close()
								}
							}
						}
						// 上传开始
						var subscription = observable.subscribe(observer)
					}
				})
			} else {
				loading.close()
				this.img = ''
			}
			_this.$refs.uploadImg.value = '' // 处理重复图片上传  组件反应无状态
		}
	}
}
</script>
<style lang="scss" >
.upload_box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;

	&>div.el-image {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&>img {
		width: 100%;
		height: 100%;
	}
}
</style>
<style lang="scss" scoped>
.upload_box {
	&>input {
		width: 0px;
		height: 0px;
		overflow: hidden;
		opacity: 0;
		display: none;
	}
}
</style>
